<template>
  <van-tabbar route v-model="active" active-color="#09C767" inactive-color="#000000">
    <van-tabbar-item v-for="(item,index) in tabs" :key="index" replace :to=item.to>
      <span>{{ item.title }}</span>
      <template #icon="props">
        <img :src="props.active ? item.active : item.inactive"/>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import Vue from 'vue';
import {Tabbar, TabbarItem} from 'vant';
import 'vant/lib/tabbar/style';
import 'vant/lib/tabbar-item/style';

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      tabs: [
        {
          title: "消息",
          to: "/message",
          inactive: require("@/assets/img/tabbar/tabbar1.png"),
          active: require("@/assets/img/tabbar/tabbar1_act.png")
        },
        {
          title: "通讯录",
          to: "/contact",
          inactive: require("@/assets/img/tabbar/tabbar2.png"),
          active: require("@/assets/img/tabbar/tabbar2_act.png")
        },
        {
          title: "发现",
          to: "/find",
          inactive: require("@/assets/img/tabbar/tabbar3.png"),
          active: require("@/assets/img/tabbar/tabbar3_act.png")
        },
        {
          title: "我",
          to: "/me",
          inactive: require("@/assets/img/tabbar/tabbar4.png"),
          active: require("@/assets/img/tabbar/tabbar4_act.png")
        },
      ],
      icon: {
        active: 'https://img.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
      },
    }
  }
}
</script>

<style scoped>
img {
  width: .7rem;
  height: .7rem;
}
</style>